{% extends 'IMTUserBundle::layout-profile.html.twig' %}

{% block main_title %}Profil - Gérer mes comptes{% endblock %}

{% block include_style %}
<link rel="stylesheet" href="{{ asset('custom-plugins/contactlist/contactlist.css') }}" media="screen" />
<style>
.contact-contents {max-height:600px;}
.contact-contents .contact-nav {background-color:#CCCCCC;}
</style>
{% endblock %}

{% block include_script %}
<script src="{{ asset('custom-plugins/contactlist/contactlist.min.js') }}"></script>
<script>
$(document).ready(function(){
	$( '#account_list_contacts' ).contactList({
		filterPlaceholder: 'Rechercher ...', 
	});
});
</script>
{% endblock %}

{% block profil_ariane %}
<li>
	<i class="icon-home"></i><a href="{{ path('fos_user_profile_show') }}">Profil</a>
	<span class="divider">&raquo;</span>
</li>
<li>
	<a href="{{ path('account_home') }}">Comptes</a>
	<span class="divider">&raquo;</span>
</li>
<li>
	Editer compte
</li>
{% endblock %}

{% block profil_header %}
<div class="profile-head clearfix">
	<div class="profile-info pull-left">
		<h1 class="profile-username">Gérer mes comptes</h1>
	</div>
	
	<div class="btn-toolbar pull-right">
		<div class="btn-group">
			<a class="btn btn-success" href="{{ path('account_accountimt_new') }}"><i class="icon-plus"></i> Ajouter un compte</a>
			<button data-toggle="dropdown" class="btn btn-success dropdown-toggle"><span class="caret"></span></button>
			<ul class="dropdown-menu">
		        <li><a href="{{ path('account_accountimt_new') }}">Compte MyTime</a></li>
		        <li><a href="{{ path('account_accountgmail_new') }}">Compte Gmail</a></li>
	        </ul>
	    </div>
	</div>
</div>
{% endblock %}

{% block profil_menu %}
{% include 'IMTUserBundle::menu-profile.html.twig' with {'profile_menu_selected': 'accounts'} %}
{% endblock %}

{% block profil_content %}
<div class="profile-content">
	<div class="row-fluid">
		<div class="span7 widget">
		    <div class="widget-header light">
		    	<span class="title">Modification d'un compte MyTime</span>
				<div class="toolbar">
					<div class="btn-group">
						<a href="#" onclick="$(this).children('form').submit(); return false;" class="btn btn-danger"><i class="icon-remove"></i> Supprimer
					        <form action="{{ path('account_accountimt_delete', { 'id': entity.id }) }}" method="post" class="hide">
					            {{ form_widget(delete_form) }}
					        </form>
				        </a>
					</div>
				</div>
		    </div>
		    <div class="widget-content form-container">
				<form class="form-horizontal" action="{{ path('account_accountimt_update', { 'id': entity.id }) }}" style="margin:0;" method="post" {{ form_enctype(edit_form) }}>
				    {{ form_errors(edit_form) }}
				
					{{ form_row(edit_form.active, {'label':'Activation'}) }}
					{{ form_row(edit_form.title, {'label':'Nom du compte'}) }}
					{{ form_row(edit_form.color, {'label':'Couleur'}) }}
				    
				    {{ form_widget(edit_form._token) }}
			    	<div class="form-actions">
	                	<button class="btn btn-primary" type="submit">Modifier le compte</button>
	                </div>
				</form>
			</div>
	    </div>
	    
		<div class="span5 widget">
		    <div class="widget-header light">
		    	<span class="title">Liste des contacts</span>
		    	<div class="toolbar">
					<div class="btn-group">
						<a class="btn" href="{{ path('imt_user_contact_new') }}"><i class="icon-plus"></i> Ajouter</a>
					</div>
				</div>
		    </div>
		    <div class="widget-content form-container">
				<ul id="account_list_contacts">
				{% for name, index in contacts %}
			    	<li data-group="{{ name }}">
				        <a class="title">{{ index.title }}</a>
				        {% if index.values|length > 0 %}
				        <ul>
		    			{% for contact in index.values %}
					        <li>
						        <a href="{{ path('imt_user_contact_show', { 'id': contact.id }) }}">
							        <span>{{ contact }}</span> 
								</a>
					        </li>
					    {% endfor %}
				        </ul>
				        {% endif %}
			        </li>
				{% endfor %}
		    	</ul>
		    </div>
    	</div>
	</div>
</div>

{% endblock %}
